<template>
    <div id="joinBox" ref="joinBox">
        <div id="name" class="joinLi">
          <span>姓名</span><el-input v-model="name" placeholder="请输入姓名" class="MyInput"></el-input>
        </div>
        <div id="phone" class="joinLi">
          <span>手机</span><el-input v-model="phone" placeholder="请输入手机号"  class="MyInput"></el-input>
        </div>
        <div id="userCount" class="joinLi">
          <span>参与人数</span>
          <div class="userNum">
            <span>成年人</span>
            <el-input-number v-model="personNum" :min="1" :max="99" label="描述文字"></el-input-number>
          </div>
          <div class="userNum">
            <span>小孩</span>
            <el-input-number v-model="childNum" :min="0" :max="99" label="描述文字"></el-input-number>
          </div>
        </div>
        <div id="desc" class="joinLi">
          <span>备注</span>
          <el-input
            class="descBox"
            type="textarea"
            :autosize = "{ minRows: 4}"
            placeholder="请输入内容"
            v-model="desc"
          >
          </el-input>
        </div>
        <span id="subBtn" @click="subInfo">提交</span>
        <p id="titBox">
          活动报名
          <i id="close" @click="closeFun">×</i>
        </p>
    </div>
</template>

<script>
  import Utils from "../assets/Util"
  export default {
    name: 'JoinActivity',
    data(){
      return {
        name:"",
        phone:"",
        personNum:1,
        childNum:0,
        desc:""
      }
    },
    methods:{
      closeFun(){
          this.$emit("closeSubBox");
      },
      subInfo(){
        if(this.name === ""){
          this.$message.warning("请输入名字");
          return false;
        }
        let that = this;
        let props = {
          url:"/Activity/JoinActivity",
          data:{
            "token": localStorage.getItem("token"),
            "id": that.$route.query.id,
            "userID": localStorage.getItem("uId"),
            "remark": that.desc,
            "disabled": 1,
            "userCount": that.personNum,
            "realName": that.name,
            "phoneNum": that.phone,
            "UserCountChild": that.childNum
          },
          sCallBack:res => {
            console.log(res);
            if(res.data.code === 1){
              that.$message.success("提交成功,请等待审核");
              that.$emit("subSuccess");
            }else if(res.data.code === 4){
              that.refreshToken(that.subInfo());
            }else{
              that.$message.error("提交失败,请联系客服");
            }
          },
          eCallBack:err => {
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 刷新token
      refreshToken(callBack){
        let refresh = {
          url:"/user/GetToken",
          data:{
            token:localStorage.getItem('token')
          },
          sCallBack:(res) => {
            localStorage.setItem("token", res.data.data)
            callBack && callBack();
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        Utils.myRequest(refresh);
      }
    }
  }
</script>

<style scoped>
  #joinBox {
    width:100%;
    height: 91%;
    padding-top:45px;
    position:relative;
    background:#fff;
  }
  .MyInput{
    width:60%;
    display:inline-block;
  }
  .userNum{
    margin-right:25px;
  }
  .userNum:nth-child(3){
    margin-right:0;
  }
  .userNum span{
    width:50px;
    margin-right:10px;
  }
  .descBox{
    width:60%;
  }
  .joinLi{
    display: flex;
    justify-content: center;
    margin-top:30px;
  }
  span{
    line-height:40px;
    margin-right:30px;
    text-align: left;
    width:100px;
    display: inline-block;
  }
  #subBtn{
    color:#fff;
    width:100px;
    height:40px;
    line-height:40px;
    background: #119C5B;
    text-align: center;
    border-radius:4px;
    margin-top:40px;
    float:right;
    margin-right:107px;
    cursor:pointer;
  }
  #close{
    position: absolute;
    top:7px;
    right:20px;
    cursor:pointer;
    font-size:20px;
    display:block;
    width:25px;
    height:25px;
    text-align: center;
    line-height:25px;
  }
  #titBox{
    position: absolute;
    top:0px;
    left:0px;
    color:#fff;
    background:#119C5B;
    width:100%;
    height:40px;
    line-height: 40px;
    text-indent:20px;
  }
</style>
